<template>
  <div class="workstart">
    <Header title="流程功能" :plusGoRouter="true">
    </Header>
    <div class="mui-content ">
      <Card
        hide-header
        unpadding
        full
        unborder
        class="je-content card-wrapper"
      >
        <Tab
          :tabs="tabs"
        >
          <div
            v-for="({funcs, title}, index) in tabpaneData"
            :key="index"
            class="tab-item"
          >
            <p
              class="menu-title"
              style="font-size:18px;"
            >
              {{ title }}
            </p>
            <Menu
              :data="funcs"
              @tap="handleMenuClick"
            />
          </div>
        </Tab>
      </Card>
    </div>
  </div>
</template>

<script>
import { AllHtmlEntities } from 'html-entities';
import isEmpty from 'lodash/isEmpty';
import {
  getWorkStart,
} from './actions/action';
import Icon from '@/components/icon';
import Menu from '@/components/menu';
import Tab from '@/components/tab';
import Card from '@/components/card2';
import { openWindow, laodMore } from '@/helper';

const { decode } = AllHtmlEntities;
import Header from '@/components/header';

export default {
  name: 'WorkStart',
  components: {
    Icon, Menu, Card, Tab,Header
  },
  data() {
    return {
      tabs: [],
      tabpaneData: [],
    };
  },
  created() {
    const that = this;
    that.initData();
  },
  mounted() {
  },
  methods: {
    async initData() {
      const iconData = [
        { text: '商机报备', id: '8jSNpatboEZzPBOcK7e', color: '#f6c021' },
        { text: '订单申请', id: 'aITUzSdmFpxLwiUQHrS', color: '#ff6f00' },
        { text: '退款申请', id: 'DC4k2IKmWQ7m6ltgaNZ', color: '#F0846C' },
        { text: '发票申请', id: 'NpngEE6lmDtzsSvc6zb', color: '#9FD13A' },
        { text: '报价申请', id: 'uvTzLiqlh9okPcRj16K', color: '#E66DB6' },
        { text: '退货申请', id: 'Uzko4apPTuVwytoxiMZ', color: '#ff9100' },
        { text: '招聘申请', id: '0RYuWHIxRqn5CscSOQs', color: '#4495C0' },
        { text: '招待申请', id: '8lTCyGOf5LGbrmYsUkG', color: '#E2B843' },
        { text: '用章申请', id: 'A0twrqPOBKFCZlZou1z', color: '#8CC477' },
        { text: '借款申请', id: 'eM8r8hCm2fPQsyqaUmG', color: '#F3743A' },
        { text: '用车申请', id: 'EsJgPoTOkfIsNLysOsQ', color: '#BCAD35' },
        { text: '名片申请', id: 'fb9zGd12G25tgI2mSAX', color: '#046DD5' },
        { text: '礼品申请', id: 'FmGtKnSmpQHNlmqQOhU', color: '#DAC179' },
        { text: '请假申请', id: 'FtAQtxYsLcvcVmqd6Vb', color: '#69ABDA' },
        { text: '加班申请', id: 'gVfDIOAmHy1HGkjN7Tc', color: '#CE63A8' },
        { text: '出差申请', id: 'QOW2o0sm7OJNYzNSRtd', color: '#6367D7' },
        { text: '酒店申请', id: 'qvyegVVHmn9CPdvm5CZ', color: '#94A811' },
        { text: '采购申请', id: 'SFUf0dSEPL2fKYBYIq2', color: '#f8b757' },
        { text: '外出申请', id: 'Y78zCQnlSSCa9juUGq3', color: '#DC4C8B' },
      ];
      /* const delData = [
        { name: '发票申请', nodeInfo: 'CRM_JYGL_FPGL' },
        { name: '报价申请', nodeInfo: 'CRM_JYGL_BJD' },
        { name: '退货申请', code: 'CRM_JYGL_THJL' },
        { name: '退款记录', code: 'CRM_JYGL_TKJL' },
        { name: '招聘申请', code: 'OA_LCSP_ZPSQ' },
        { name: '招待申请', code: 'OA_LCSP_ZDSQ' },
        { name: '用章申请', code: 'OA_LCSP_YZSQ' },
        { name: '名片申请', code: 'OA_LCSP_MPSQ' },
        { name: '礼品申请', code: 'OA_LCSP_LPSQ' },
        { name: '酒店申请', code: 'OA_LCSP_JDSQ' },
        { name: '采购申请', code: 'OA_LCSP_CGSQ' },
      ]; */
      const data = await getWorkStart();
      data.forEach(({ text, children }) => {
        const list = children.filter(({ nodeInfo }) => nodeInfo != '');
        this.tabs.push({ title: text });// tab 标题
        const items = list.map(({ iconCls, id: ID, ...item }, index) => ({
          ID,
          iconfont: iconCls,
          iconfontcolor: iconData.length >= index ? iconData[index].color : iconData[0],
          ...item,
          styles: { 'line-height': '.8rem', 'font-size': '28px' },
        }));
        this.tabpaneData.push({
          title: text,
          funcs: items,
        });
      });
    },
    handleMenuClick(data) {
      JE.showFunc(data.nodeInfo, { page: 'form.html' });
    },
  },
};
</script>
<style lang="less">
@import '~@/theme/variable.less';

html,body{
  background-color: @background-color;
}
</style>

<style lang="less" scoped>
@import '~@/theme/variable.less';
  .menu-title{
    margin-left: 10px;
    color: #3f3f3f;
    font-size: 30px;
    font-weight: 600;
  }
  .tab-item{
    margin-top: 40px;
  }
  .je-list-line{
    align-items: flex-start;
  }
  .mui-content{
    padding-top:88px;
  }
</style>
